<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}
			
			html,
			body {
				height: 100%;
				width: 100%;
				background-color: #000000;
			}
			
			body {
				font-size: 10px;
				background-image: url(img/heiban.png);
				background-repeat: no-repeat;
				background-size: cover;
				/*background-color: #000000;*/
			}
			
			canvas {
				display: block;
			}
		</style>
		<script type="text/javascript">
			var numbers = [
				[
					[0, 0, 1, 1, 1, 0, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 0, 1, 1, 0],
					[0, 0, 1, 1, 1, 0, 0]
				], //0
				[
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[1, 1, 1, 1, 1, 1, 1]
				], //1
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 1, 1, 1, 1, 1]
				], //2
				[
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 1, 0, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //3
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 0],
					[0, 0, 1, 1, 1, 1, 0],
					[0, 1, 1, 0, 1, 1, 0],
					[1, 1, 0, 0, 1, 1, 0],
					[1, 1, 1, 1, 1, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 1, 1]
				], //4
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 1, 1, 1, 1, 0],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //5
				[
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 1, 1, 0, 0, 0, 0],
					[1, 1, 0, 0, 0, 0, 0],
					[1, 1, 0, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //6
				[
					[1, 1, 1, 1, 1, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0],
					[0, 0, 1, 1, 0, 0, 0]
				], //7
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 1, 1, 0]
				], //8
				[
					[0, 1, 1, 1, 1, 1, 0],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[1, 1, 0, 0, 0, 1, 1],
					[0, 1, 1, 1, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 0, 1, 1],
					[0, 0, 0, 0, 1, 1, 0],
					[0, 0, 0, 1, 1, 0, 0],
					[0, 1, 1, 0, 0, 0, 0]
				], //9
				[
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0],
					[0, 1, 1, 0],
					[0, 1, 1, 0],
					[0, 0, 0, 0],
					[0, 0, 0, 0]
				] //冒号:
			];

			var ctx;
			var canvas;
			var qius = new Array(); //存放爆破后的小球数组
			var time; //绘制出来的时间
			var R = 10; //每个小球的半径
			window.onload = function() {
				if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
					R = 8;
				}
				canvas = document.getElementById("myCanvas");
				canvas.width = document.documentElement.clientWidth;
				canvas.height = document.documentElement.clientHeight;
				ctx = canvas.getContext("2d");
				ctx.fillStyle = "rgba(255,255,255,0)";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				drawTime(); //先绘制当前时间
				setInterval("update()", 50);
			};

			function update() {
				//获得当前时间
				var t = new Date();
				var h = t.getHours();
				var m = t.getMinutes();
				var s = t.getSeconds();
				if(t.getSeconds() != time.getSeconds()) {
					//添加小球
					//判断秒的个位数
					if(s % 10 != time.getSeconds() % 10) {
						addQiu(5 * 16 * R + 2 * 10 * R, 10 * R, R, time.getSeconds() % 10);
					}
					//判断秒的十位数
					var s1 = parseInt(s / 10); //3
					var s2 = parseInt(time.getSeconds() / 10); //2
					if(s1 != s2) {
						addQiu(4 * 16 * R + 2 * 10 * R, 10 * R, R, s2);
					}
					//判断分钟的个位数
					if(m % 10 != time.getMinutes() % 10) {
						addQiu(3 * 16 * R + 10 * R, 10 * R, R, time.getMinutes() % 10);
					}
					//判断分钟的十位数
					var s1 = parseInt(m / 10); //3
					var s2 = parseInt(time.getMinutes() / 10); //2
					if(s1 != s2) {
						addQiu(2 * 16 * R + 10 * R, 10 * R, R, s2);
					}

					//判断小时的个位数
					if(h % 10 != time.getHours() % 10) {
						addQiu(1 * 16 * R + 10 * R, 10 * R, R, time.getHours() % 10);
					}
					//判断小时的十位数
					var h1 = parseInt(h / 10);
					var h2 = parseInt(time.getHours() / 10); //2
					if(h1 != h2) {
						addQiu(0 * 16 * R + 10 * R, 10 * R, R, h2);
					}

				}
				drawTime();
			}

			/*
			 * 添加小球到qius数组
			 * x x方向坐标
			 * y y方向坐标
			 * R R半径
			 * index 添加的数字
			 */
			function addQiu(x, y, R, index) {
				for(var i = 0; i < numbers[index].length; i++) {
					for(var k = 0; k < numbers[index][i].length; k++) {
						if(numbers[index][i][k] == 1) {
							//创建小球加入到数组中
							//x,y,R,vx,vy,g,color
							var vx = Math.pow(-1, Math.ceil(Math.random() * 10)) * 4 + Math.random(); //-5/5
							var color = "rgba(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ",0.8)";
							qius.push([x + 3 * R + k * 2 * R, 5 * R + i * 2 * R, R, vx, -1.5 * R, 2.5 + Math.random() * 5, color]);
						}
					}
				}
			}

			/*
			 * 绘制时间
			 */
			function drawTime() {
				//清屏
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				//重新填充透明背景
				ctx.fillStyle = "rgba(255,255,255,0)";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				//获取最新的时间
				time = new Date();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				//12:05:37
				//1,2,10,0,5,10,3,7
				var indexarr = new Array(); //存放时间字符串拆分后的数组
				var num1 = parseInt(h / 10);
				var num2 = h % 10;
				indexarr.push(num1);
				indexarr.push(num2);
				indexarr.push(10);
				var num1 = parseInt(m / 10);
				var num2 = m % 10;
				indexarr.push(num1);
				indexarr.push(num2);
				indexarr.push(10);
				var num1 = parseInt(s / 10);
				var num2 = s % 10;
				indexarr.push(num1);
				indexarr.push(num2);
				for(var i = 0; i < indexarr.length; i++) {
					var x = i * 16 * R;
					if(i > 2) {
						x -= 6 * R;
					}
					if(i > 5) {
						x -= 6 * R;
					}
					addnumber(x + 3 * R, 50, R, indexarr[i]);
				}
				drawQiu();
			}

			/*
			 * 绘制每个小球
			 */
			function drawQiu() {
				var count = 0;
				for(var i = 0; i < qius.length; i++) {
					ctx.beginPath();
					ctx.fillStyle = qius[i][6];
					ctx.arc(qius[i][0], qius[i][1], qius[i][2], -8, 2 * Math.PI);
					ctx.fill();
					ctx.closePath();
					qius[i][0] += qius[i][3];
					qius[i][1] += qius[i][4];
					qius[i][4] += qius[i][5];
					if(qius[i][1] >= canvas.height - qius[i][2] * 2) {
						qius[i][1] = canvas.height - qius[i][2] * 2;
						qius[i][4] = qius[i][4] * 0.7 * -1;
					}
					//优化性能，把边界内的小球往数组前面移动
					if(qius[i][0] > qius[i][2] && qius[i][0] < canvas.width) {
						qius[count] = qius[i];
						count++;
					}
				}

				//去除出边界的球
				while(count < qius.length) {
					qius.pop();
				}
			}

			/*
			 * 绘制时间对应的数字
			 */
			function addnumber(x, y, R, index) {
				//保存当前画布
				ctx.save();
				//平移画布坐标
				ctx.translate(x, y);
				for(var i = 0; i < numbers[index].length; i++) {
					for(var k = 0; k < numbers[index][i].length; k++) {
						if(numbers[index][i][k] == 1) {
							ctx.beginPath();
							ctx.fillStyle = "rgba(255,255,255,0.9)";
							ctx.arc(k * 2 * R, i * 2 * R, R, 0, 2 * Math.PI);
							ctx.fill();
						}
					}
				}
				//回到画布初始状态
				ctx.restore();
			}
		</script>
	</head>

	<body>
		<canvas id="myCanvas">
			您的浏览器不支持Html5 canvas，请换一个浏览器。
		</canvas>
	</body>

</html>